<template>
  <div class="nav-first-container" v-show="loading" id="HistoryDetail">
    <div class="bg-grey">
        <div class="head-info">
          <van-row>
            <van-col :span="4" @click="checkIdCard(formtable_main.id)">
              <template v-if="base.userimg">
                <van-image class="all-head-img" radius="4px" :src="`${$common.filePath}${apps.userimg}`"/>
              </template>
              <template v-else>
                <img class="all-head-img" src="../../assets/notification/head.png">
              </template>
            </van-col>
            <van-col :span="20" class="head-right">
              <p class="head-title van-multi-ellipsis--l2">{{base.username}}-{{table.workflowname}}</p>
              <p class="head-desc van-ellipsis flex-row">
                <span>申请时间：{{base.createdate + " " + base.createtime}}</span>
              </p>
            </van-col>
          </van-row>
        </div>
        <div class="margin-t-10">
          <van-cell-group :border="false" class="padding-tb-10">
            <van-cell title="标题" :value="base.requestname" title-class="cell-left" value-class="cell-right" :border="false"/>
            <div v-for="(table,index) in tablelist" :key="index">
              <!-- 附件 -->
              <template v-if="table.fieldhtmltype == '6'">
                <van-cell :title="table.labelname" title-class="cell-left" value-class="cell-right" :border="false">
                  <template slot="default" v-if="table.value">
                    <div class="form-file" v-for="(item,findex) in table.file" :key="`附件${findex}`" @click="checkFile(item)">
                      <img class="img-class" :src="$common.historyFileIcon(item.docfiletype)">
                      <p class="van-multi-ellipsis--l2 ">
                        {{item.imagefilename}}
                      </p>
                    </div>
                  </template>
                </van-cell>
              </template>
              <!-- 同行人员 -->
              <template v-else-if="table.fieldhtmltype == '17'">
                <van-cell :title="table.labelname" title-class="cell-left" value-class="cell-right" :border="false">
                  <template slot="default">
                    <p :class="ellipsis?'van-multi-ellipsis--l3':''">
                      {{table.value}}
                    </p> 
                    <span style="color: #2E79FF;" @click="showAll"> {{ellipsisTitle}} </span>
                  </template>
                </van-cell>
              </template>
              <!-- 关联表单 -->
              <template v-else-if="table.fieldhtmltype == '3' && table.type == '171'">
                <van-cell :title="table.labelname" title-class="cell-left" value-class="cell-right" :border="false">
                  <template slot="default" v-if="table.value">
                    <div class="form-file" v-for="item in table.table">
                      <p class="van-multi-ellipsis--l2 " @click="closeFormClick(item)">
                        {{item.requestname}}
                      </p>
                    </div>
                  </template>
                </van-cell>
              </template>
              <!-- 正文 -->
              <template v-else-if="table.fieldhtmltype == '3' && table.type == '9'">
                <van-cell :title="table.labelname" title-class="cell-left" value-class="cell-right" :border="false">
                  <template slot="default" v-if="table.file">
                    <div class="form-file"  @click="checkFile(table.file)">
                      <img class="img-class" :src="$common.historyFileIcon(table.file.docfiletype)">
                      <p class="van-multi-ellipsis--l2 ">
                        {{table.file.imagefilename}}
                      </p>
                    </div>
                  </template>
                </van-cell>
              </template>
              <template v-else>
                <van-cell :title="table.labelname" :value="table.value" title-class="cell-left" value-class="cell-right" :border="false"/>
              </template>
            </div>
          </van-cell-group>
        </div>
        <!-- workflowid=159  差旅费报销单 -->
        <template v-if="base.workflowid == '159' && bill_table">
          <p class="progress">明细表</p>
          <div v-for="(table, tindex) in bill_table" :key="tindex">
            <van-panel v-for="(grid, indexs) in table.table" :key="indexs" class="margin-b-10">
              <div slot="header"></div>
              <div slot="default">
                <p class="table-inner-title">起止时间及地点</p>
                <van-cell title="开始日期" :value="grid.ksrq" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="出发地点" :value="grid.cfdd" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="结束日期" :value="grid.jsrq" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="出差地点" :value="grid.ccdd" title-class="cell-left" value-class="cell-right" :border="false"/>
                 <p class="table-inner-title">交通费</p>
                <van-cell title="交通工具" :value="grid.jtgj" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="单据张数" :value="grid.djzs11" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="金额" :value="grid.je2" title-class="cell-left" value-class="cell-right" :border="false"/>
                 <p class="table-inner-title">出差补贴</p>
                <van-cell title="人数" :value="grid.rs" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="天数" :value="grid.ts" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="补贴标准" :value="grid.btbz" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="金额" :value="grid.je3" title-class="cell-left" value-class="cell-right" :border="false"/>
                 <p class="table-inner-title">其他</p>
                <van-cell title="项目" :value="grid.xm" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="单据张数" :value="grid.djzs1122" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="金额" :value="grid.je4" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="单据张数合计" :value="grid.djzshj" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="明细表合计" :value="grid.mxbhj" title-class="cell-left" value-class="cell-right" :border="false"/>
              </div>
            </van-panel>
          </div>
        </template>
        <!-- workflowid=170  费用报销单 -->
        <template v-if="base.workflowid == '170' && bill_table">
          <p class="progress">明细表</p>
          <div v-for="(table, tindex) in bill_table" :key="tindex">
            <van-panel v-for="(grid, indexs) in table.table" :key="indexs" class="margin-b-10">
              <div slot="header"></div>
              <div slot="default">
                <van-cell title="费用事由" :value="grid.fysy" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="费用类别" :value="grid.fynb" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="明细金额" :value="grid.mxje" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="明细合计" :value="grid.mxhj" title-class="cell-left" value-class="cell-right" :border="false"/>
              </div>
            </van-panel>
          </div>
        </template>
        <!-- workflowid=132  物资采购审批流程 -->
        <template v-if="bill_table && base.workflowid == '132'">
          <p class="progress">明细表</p>
          <div v-for="(table, tindex) in bill_table" :key="tindex">
            <van-panel v-for="(grid, indexs) in table.table" :key="indexs" class="margin-b-10">
              <div slot="header"></div>
              <div slot="default">
                <van-cell title="物资品名、规格" :value="grid.wzpm" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="数量" :value="grid.sl" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="预计单价" :value="grid.yjdj" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="预计金额" :value="grid.yjje" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="用途" :value="grid.yt" title-class="cell-left" value-class="cell-right" :border="false"/>
              </div>
            </van-panel>
          </div>
        </template>
        <!-- workflowid=155  外出报批报备表 -->
        <template v-if="bill_table && base.workflowid == '155'" >
          <p class="progress">明细表</p>
          <div v-for="(table, tableIndex) in bill_table" :key="tableIndex">
            <van-panel v-for="(grid, indexs) in table.table" :key="indexs" class="margin-b-10">
              <div slot="header"></div>
              <div slot="default">
                <van-cell title="始发地" :value="grid.sfd" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="中转点" :value="grid.zzd" title-class="cell-left" value-class="cell-right" :border="false"/>
                <van-cell title="目的地" :value="grid.mdd" title-class="cell-left" value-class="cell-right" :border="false"/>
              </div>
            </van-panel>
          </div>
        </template>

        <p class="progress">流转意见</p>
        <div class="steps-container">
          <div class="steps" v-for="(step, stepindex) in requestlog" :key="stepindex">
            <div class="flow-img"  @click="checkIdCard(step.user.id)">
              <template v-if="step.user.img">
                <van-image class="head-border-img" radius="4px" :src="`${$common.filePath}${step.user.img}`"/>
              </template>
              <template v-else>
                 <img class="head-img" src="../../assets/notification/head.png">
              </template>
            </div>
            <div class="step-line"></div>
            <div class="step-right">
              <p class="step-title-class">
                <van-col :span="14">
                  <span class=" van-multi-ellipsis--l2">
                    {{step.user.name}}
                  </span>
                </van-col>
                <van-col :span="10" class="align-right">
                  <span class="pass-color">{{ getTypename(step.logtype) }}</span>
                </van-col>
              </p>
              <p class="step-title-class step-second-info">
                <van-col :span="12"><p class="van-ellipsis">{{step.user.realdepaname}}</p></van-col>
                <van-col :span="12"><p class="step-time-class align-right">{{step.operatedate + ' ' + step.operatetime}}</p></van-col>
              </p>
              <div class="step-container" v-if="step.remark && step.remark.replace('<br/>','') != ''">
                <div v-html="step.remark"></div>
              </div>
              <p class="step-last-info">接收人：{{step.receivedPersons}}</p>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        loading: false,
        base: {},              //基本信息
        formtable_main: {},    //表单数据
        requestlog: [],        //流程步骤数据
        bill_table: [],        //表格
        tablecount: [],
        tablelist: [],
        table: {},
        user_id:"",            //当前用户id
        ellipsis: true,
        ellipsisTitle: '显示全部'
      }
    },
    activated() {
      this.$toast({
        type: "loading",
        message: "加载中...",
        forbidClick: true
      })
      this.loading = false
      this.apps = {},
      this.forms = [],
      this.stepData = [],
      this.type = "",
      this.flownext = [],
      this.btnDisable = false,   //催办disabled
      this.currentStep = this.$route.query.step
      this.user_id = this.$store.state.userId
      this.ellipsis = true
      this.ellipsisTitle = '显示全部'
      this.$bridge.callHandler('navTitle',{title: "公文详情"})
      if(this.$route.query.from != 'origin') {
        this.$bridge.callHandler('navBack')
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.go(-1)
          responseCallback('go(-1)')
        })
      }
      this.getDetailInfo()
    },
    methods: {
      fileName(url, type) {
        let fullName      = url.split('@daxsdfcsgr6time666@')[1] || '非法文件名.err'
        let pointCount    = fullName.split('.').length
        let fileType      = fullName.split('.')[pointCount - 1]
        let fileTypeIndex = fullName.indexOf(fileType)
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      checkFile(item) {
        // console.log(item)
        let config = {
          method: "post",
          url: `${this.$common.basePath}aatp5/public/index.php/formfile/form_file/file_zip`,
          data: {
            url: item.addr,
            file_name: item.imagefilename
          }
        }
        this.$axios(config).then(res => {
          let urladdr = res.data
          urladdr = urladdr.replace("..", "")
          this.$bridge.callHandler('showPreview', {
            url: `${this.$common.filePath}app/aatp5${urladdr}`,
            fileName: item.imagefilename
          })
          window.open(`${this.$common.filePath}app/aatp5${urladdr}?filename=${item.imagefilename}`)
        }).catch(err => {
          console.log(err)
        })
        
      },

      /**
       * 详情页数据
       * @return {[type]} [description]
       */
      getDetailInfo () {
        let config = {
          method: "post",
          url: `${this.$common.basePath}process.php`,
          data: {
            do: "processdetails",
            requestid: this.$route.query.id,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.base = res.data.requestbase
          this.table = res.data.table
          this.requestlog = res.data.requestlog
          this.formtable_main = res.data.formtable_main
          this.bill_table = res.data.bill_table
          this.tablecount = res.data.tablecount
          this.tablelist = res.data.tablelist
          this.$nextTick( _ => {
            this.loading = true
            setTimeout( _ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {
          console.log(err)
        })
        
      },
      /**
       * 显示全部
       * @return {[type]} [description]
       */
      showAll () {
        if (this.ellipsis) {
          this.ellipsis = false
          this.ellipsisTitle = '收起'
        } else {
          this.ellipsis = true
          this.ellipsisTitle = '显示全部'
        }
      },
      /**
       * 关联表单点击
       * @return {[type]} [description]
       */
      closeFormClick(obj) {
        let config = {
          method: "post",
          url: `${this.$common.basePath}process.php`,
          data: {
            do: 'ifprocess',
            requestid: this.$route.query.id
          }
        }
        this.$axios(config).then(res => {
          if (res.data.type == '1') {
            this.$bridge.callHandler('openNewView', {
              url: `${window.location.origin}/historyFlowDetail?id=${obj.requestid}`
            })
          } else {
            this.$toast("该表单不存在")
          }
        }).catch(err => {

        })
        
      },
      /**
       * 身份信息
       * @param  {[type]} uid [description]
       * @return {[type]}     [description]
       */
      checkIdCard(uid) {
        // console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      },
      /**
       * 返回样式类名
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      getTypeclass(type) {
        let typeclass = ''
        switch(type) {
          case '0'://办理中
            typeclass = 'ing-color'
            break;
          case '1'://通过
            typeclass = 'pass-color'
            break;
          case '2'://拒绝
            typeclass = 'defined-color'
            break;
          case '3'://退回
            typeclass = 'defined-color'
            break;
          case '4'://等待办理中
            typeclass = 'ing-color'
            break;
          case '5'://结束
            typeclass = 'defined-color'
            break;
          default:
            typeclass = 'defined-color'
        }
        return typeclass;
      },
      getTypename(type) {
        let typename = ""
        switch(type) {
          case '0':
            typename = '批准'
            break;
          case '1':
            typename = '保存'
            break;
          case '2':
            typename = '提交'
            break;
          case '3':
            typename = '退回'
            break;
          case '4':
            typename = '重新打开'
            break;
          case '5': 
            typename = '删除'
            break;
          case '6': 
            typename = '激活'
            break;
          case '7': 
            typename = '转发'
            break;
          case '9': 
            typename = '批注'
            break;
          case 'a': 
            typename = '意见征询'
            break;
          case 'b': 
            typename = '意见征询回复'
            break;
          case 'e': 
            typename = '强制归档'
            break;
          case 'h': 
            typename = '转办'
            break;
          case 'i': 
            typename = '干预'
            break;
          case 'j': 
            typename = '转办反馈'
            break;
          case 's': 
            typename = '督办'
            break;
          case 't': 
            typename = '抄送'
            break;
          default:
            typename = '错误'
        }
        return typename;
      },
    }
  }
</script>

<style type="text/css" lang="less" scoped> 
  p{
    margin: 0;
  }
  .margin-t-10 {
    margin-top: 10px;
  }
  .padding-b-12 {
    padding-bottom: 12.5px;
  }
  .margin-l-15 {
    margin-left: 15px;
  }
  .margin-r-10 {
    margin-right: 6px;
  }
  .padding-b-54 {
    padding-bottom: 80px;
  }
  .padding-tb-10:first-child{
    padding-top: 10px;
  }
  .padding-tb-10:last-child {
    padding-bottom: 10px;
  }
  .nav-content {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-content-height {
    height: calc(100vh - 54px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  // head-info 开始
  .head-info {
    background-color: #fff;
    padding: 15px;
    width: calc(100vw - 30px);
  }
  .all-head-img {
    width: 46px;
    height: 46px;
    border-radius: 4px;
  }
  .head-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .head-title{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
    width: 100%;
  }
  .head-desc {
    color: #999999;
    font-size: 14px;
  }
  // head-info 结束
  // 中间表单部分 开始
  .van-cell {
    padding: 1px 15px;
  }
  .cell-left {
    color: #999999;
    font-size: 15px;
    max-width: 70px;
    text-align: right;
    padding-right: 15px;
    line-height: 17px;
  }
  .cell-right {
    text-align: left;
    color: #333333;
    font-size: 15px;
    line-height: 17px;
  }
  .img-class {
    width: 20px;
    height: 23px;
    margin-right: 10px;
  }
  .form-file {
    background-color: #F5F5F5;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12px;
    line-height: normal;
    margin-bottom: 10px;
  }
  .form-file:last-child {
    margin-bottom: 0px;
  }
  // 中间表单部分 结束
  // 下一步流程设定 样式结束
  .progress {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #999999;
  }
  // van-card 开始
  .van-card__thumb {
    width: auto;
    height: auto;
    margin-right: 15px;
  }
  .van-card__content{
    padding-bottom: 15px;
    border-bottom: 1px solid #F5F5F5;
  }
  .van-card {
    margin-top: 0!important;
    background-color: #fff!important;
    padding: 15px 15px 0 15px;
  }
  .head-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .head-border-img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 2px solid #fff;
  }
  .title-class {
    font-size: 17px;
    color: #333333;
    font-weight: bold;
  }
  .desc-info-class {
    font-size: 14px;
    color: #999999;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .desc-content {
    padding: 10px 15px;
    background-color: #F5F5F5;
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    border-radius: 4px;
  }
  // van-card 结束
  // 底部按钮
  .bottom-btns {
    padding: 2px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
    margin-top: 6px;
    position: fixed;
    bottom: 0;
    z-index: 6;
  }
  .default-btn-class {
    border: none;
    color: #2E79FF;
  }

  .flex-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .font-color {
      font-weight: bold;
      color: #F5A703;
    }
  }
  .flow-img {
    z-index: 3;
    display: inline-block;
    position:absolute;
    left:0px;
    top:0px;

    img{
      z-index:5;
    }
  }
  .step-line {
    left: 20px;
  }
  .step-right {
    padding-left: 50px;
  }
  .step-title-class {
    margin-left: 5px;
  }
  .step-second-info {
    color: #666666;
    font-size: 14px;
  }
  .step-last-info {
    color: #999999;
    font-size: 14px;
    margin-left: 5px;
    margin-top: 8px;
  }
  .table-wrap-history {
    display: -webkit-box;
    max-width: 100vw;
    padding: 7px 2px 2px 2px;
    overflow-x: scroll;
    background: #e1ecff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    .table-header{
      display: inline-block;
      width: calc(25vw - 18px);
      padding: 7px;
      font-weight: bold;
      font-size: 15px;
    }
    td {
      padding-right: 3px;
    }
    input{
      width: calc(25vw - 18px);
      padding: 7px;
      box-shadow: none;
      outline: none;
      resize: none;
      border: 1px solid #f5f5f5;
      border-radius: 0;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      background-color: #fff;
    }
  }
  .table-inner-title {
    padding:8px 15px;
  }
</style>
<style type="text/css" lang="less">
  #HistoryDetail {
    .van-cell-group {
      .van-cell {
        padding: 8px 15px;
        line-height: normal;
      }
    }
  }
</style>